<template>
    <div class="login-container">
        <div class="login-page-container">
            <h1 class="title">MAX技术平台</h1>
            <el-form :model="register">
                <el-form-item>
                    <el-input class="login-input"
                              prefix-icon="el-icon-user-solid"
                              v-model="register.username"
                              placeholder="用户名"
                    ></el-input>
                    <el-input class="login-input"
                              prefix-icon="el-icon-lock"
                              v-model="register.password"
                              placeholder="密码"
                    ></el-input>
                    <el-input class="login-input"
                              prefix-icon="el-icon-lock"
                              v-model="register.email"
                              placeholder="邮箱"
                              type="email"
                    ></el-input>
                    <el-button class="input-btn click_state"
                               type="primary"
                               @click="onSumbit"
                    >
                        注册
                    </el-button>
                </el-form-item>
            </el-form>
        </div>
    </div>
</template>

<script>
import { register } from "../../api/register";
import { messageMixin } from "../../common/js/mixin";
import {mapGetters} from 'vuex'
export default {
    mixins: [messageMixin],
    data () {
        return {
            register: {
                username: "",
                password: "",
                email: ""
            },
        }
    },
    computed: {
        ...mapGetters([
            'firstActive'
        ])
    },
    methods: {
        onSumbit () {
            register(this.register).then(res => {
                if (res.code === 200) {
                   this._messge({
                       message: res.message
                   })
                }
            })
        }
    },
    watch: {
        firstActive (firstActive) {
            if (firstActive) {
                this._messge({
                    message: '注册成功'
                })
                this.$router.push('/login')
            }
        }
    }
}
</script>

<style scoped lang="scss">
    @import "src/common/scss/variable";
    .login-container {
        position: fixed;
        top: 0;
        right: 0;
        left: 0;
        bottom: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        background: url("../../assets/images/login-bg.jpg") no-repeat;
        background-size: cover;
        .login-page-container {
            width: 440px;
            padding: 40px;
            .login-input {
                font-size: 18px;
                /deep/.el-input__inner {
                    width: 440px;
                    height: 60px;
                    line-height: 20px;
                    border-radius: 30px;
                    padding: 0 69px;
                    color: $input_font_color !important;
                    background-color: $input_bg_color !important;
                    border: 1px solid $input_bg_color;
                    &:focus {
                        outline: none;
                    }
                }
                /deep/.el-input__prefix {
                    left: 24px;
                }
                & + .login-input {
                    margin-top: 24px;
                }
                &:focus-within {
                    &::before,
                    &::after {
                        content: "";
                        position: absolute;
                        top: -10px;
                        left: -10px;
                        right: -10px;
                        bottom: -10px;
                        border: 2px solid $input_focus_color;
                        transition: all .5s;
                        animation: clippath 3s infinite linear;
                        border-radius: 25px;
                    }
                    &:after {
                        animation: clippath 3s infinite -1.5s linear;
                    }
                }
            }
            .input-btn {
                width: 440px;
                height: 60px;
                margin-top: 24px;
                line-height: 23px;
                border-radius: 30px;
                background-color: $input_btn_color;
                color: $color-white;
                font-size: 16px;
                text-align: center;
                border: 1px solid $input_btn_color;
            }
            .title {
                margin-bottom: 40px;
                color: $color-white;
                font-size: 36px;
                text-align: center;
            }
        }
    }
</style>
